<template>
  <div class="steps-con">
    <div v-for="(step, index) in steps" :key="index" class="step_item">
      <div
        v-if="step.Type == 'Shunt'"
        class="step"
        @click="stepShuntClick(step)"
      >
        <div
          class="bg-line"
          :class="{ first: index == 0, last: index == steps.length - 1 }"
        />
        <div slot="dot" class="img">
          <div>
            <member :staff="{ Name: '系统', Image: image }">
              <template v-slot:body>
                <div class="type">
                  {{ step.ItemName ? step.ItemName : "分流" }}
                </div>
              </template>
            </member>
          </div>
        </div>
        <div class="content">
          <div class="body">
            <div class="time">
              {{ formatTime(step.StateTime ? step.StateTime : step.CreatedAt) }}
            </div>
            <div class="state">
              <span v-if="step.State == 'Refuse'">已拒绝</span>
              <span v-else-if="step.State == 'Reject'">已驳回</span>
              <span v-else-if="step.State == 'Done'">已完成</span>
              <span v-else-if="step.State == 'Doing'">执行中</span>
              <span
                v-else-if="step.State == 'ToDo' && step.Type == 'SubFlow'"
              >待发起</span>
            </div>
          </div>
        </div>
        <div class="more">
<!--          <nut-icon type="right" color="auto" />-->
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div v-else class="step" @click="stepNormalClick(step)">
        <div
          class="bg-line"
          :class="{ first: index == 0, last: index == steps.length - 1 }"
        />
        <div slot="dot" class="img">
          <div v-if="!step.Step.Receivers || step.Step.Receivers.length <= 0">
            <member :staff="{ Name: '系统', Image: image }">
              <template v-slot:body>
                <div class="type">自动通过</div>
              </template>
            </member>
          </div>
          <div
            v-else-if="step.Step.Receivers && step.Step.Receivers.length > 1"
          >
            <member :staff="step.Receivers[0]">
              <template v-slot:ops>
                <div name="ops" @click="showMore(step.Step.Receivers)">
                  等{{ step.Step.Receivers.length }}人
                </div>
              </template>
              <template v-slot:body>
                <div class="type">
                  {{ step.ItemName ? step.ItemName : tps[step.Type] + "人" }}
                </div>
              </template>
            </member>
          </div>
          <div
            v-else-if="step.Step.Receivers && step.Step.Receivers.length > 0"
          >
            <member :staff="step.Step.Receivers[0]">
              <template v-slot:body>
                <div class="type">
                  {{ step.ItemName ? step.ItemName : tps[step.Type] + "人" }}
                </div>
              </template>
            </member>
          </div>
          <div v-else>
            <member :staff="{ Name: '系统', Image: image }">
              <template v-slot:body>
                <div class="type">自动通过</div>
              </template>
            </member>
          </div>
        </div>
        <div class="content">
          <div class="body">
            <div class="time">
              {{ formatTime(step.StateTime ? step.StateTime : step.CreatedAt) }}
            </div>
            <div class="state">
              <span v-if="step.State == 'Refuse'">已拒绝</span>
              <span v-else-if="step.State == 'Reject'">已驳回</span>
              <span
                v-else-if="step.State == 'Done'"
              >已{{ tps[step.Type] }}</span>
              <span
                v-else-if="step.State == 'Doing'"
              >{{ tps[step.Type] }}中</span>
              <span
                v-else-if="step.State == 'ToDo' && step.Type == 'SubFlow'"
              >待发起子流程</span>
            </div>
          </div>
        </div>
        <div v-if="step.showIcon" class="more">
<!--          <nut-icon type="right" color="auto" />-->
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
<!--    <nut-popup-->
<!--      v-if="showShuntDetail"-->
<!--      v-model="showShuntDetail"-->
<!--      position="bottom"-->
<!--      closeable-->
<!--      @close="showShuntDetail = false"-->
<!--    >-->
<!--      <div class="shunt_con">-->
<!--        <nut-tab>-->
<!--          <nut-tab-panel-->
<!--            v-for="(shunt, index) in selectShunt.Step.Shunts"-->
<!--            :key="index"-->
<!--            :tab-title="shunt.ShuntName"-->
<!--          >-->
<!--            <div class="step-con">-->
<!--              <steps :steps.sync="shunt.Steps" :tps="tps" />-->
<!--            </div>-->
<!--          </nut-tab-panel>-->
<!--        </nut-tab>-->
<!--      </div>-->
<!--    </nut-popup>-->
<!--    <nut-dialog-->
<!--      title=""-->
<!--      :visible="showMoreVisble"-->
<!--      no-footer-->
<!--      @close="showMoreVisble = false"-->
<!--    >-->
<!--      <div v-for="staff in list" :key="staff.Id" class="staff">-->
<!--        <member :staff="staff" />-->
<!--      </div>-->
<!--    </nut-dialog>-->
<!--    <nut-popup-->
<!--      v-model="showStepDetail"-->
<!--      position="bottom"-->
<!--      closeable-->
<!--      @close="showStepDetail = false"-->
<!--    >-->
<!--      <div-->
<!--        v-for="item of selectStep.Step.Staff"-->
<!--        :key="item.StaffId"-->
<!--        class="item"-->
<!--      >-->
<!--        <cell-->
<!--          :title="selectStep.ItemName"-->
<!--          :icon="false"-->
<!--          :val="item.StaffName"-->
<!--          placeholder="暂无"-->
<!--        >-->
<!--          <span>{{ item.StaffName }}</span>-->
<!--        </cell>-->
<!--      </div>-->
<!--    </nut-popup>-->
  </div>
</template>
<script>
import member from '@/components/staff/member.vue'
import cell from '@/components/form/formcell.vue'
import { approverStartSubflow } from '@/api/approval/index'
export default {
  name: 'Steps',
  components: {
    member,
    cell
  },
  props: {
    steps: {
      type: Array,
      required: true
    },
    tps: {
      type: Object,
      default: {}
    },
    affair: {
      type: Object,
      required: true
    },
    autoClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showMoreVisble: false,
      list: [],
      user: {},
      showStepDetail: false,
      selectStep: { Step: [] },
      image: image,
      selectShunt: null,
      showShuntDetail: false
    }
  },
  computed: {},
  created() {
    for (var item of this.steps) {
      if (item.Type != 'Shunt') {
        this.initStep(item)
      }
    }
  },
  methods: {
    showMore: function(list) {
      this.list.splice(0, this.list.length, ...list)
      this.showMoreVisble = true
    },
    formatTime(time) {
      var date = time
      if (typeof time !== 'date') {
        date = new Date(time)
      }
      var Y = date.getFullYear()
      var M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var m =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m
    },
    stepShuntClick(step) {
      this.selectShunt = step
      if (this.autoClick) {
        this.showShuntDetail = true
      } else {
        this.$emit('selectItem', step)
      }
    },
    showMore: function(list) {
      this.list.splice(0, this.list.length, ...list)
      this.showMoreVisble = true
    },
    stepNormalClick(step) {
      if (this.autoClick) {
        if (step.showIcon) {
          if (step.Type == 'SubFlow') {
            this.subFlowClick(step)
          } else {
            this.selectStep = step
            this.showStepDetail = true
          }
        }
      } else {
        this.$emit('selectItem', step)
      }
    },
    initStep(step) {
      if (step.Type == 'SubFlow' && step.State != 'ToDo') {
        step.showIcon = true
      } else {
        var staffMap = {}
        if (step.Step && step.Step.Receivers) {
          for (const staff of step.Step.Receivers) {
            staffMap[staff.Id] = staff
          }
        }
        if (step.Step && step.Step.Staff) {
          for (const s of step.Step.Staff) {
            s.Staff = staffMap[s.StaffId]
            step.showIcon =
              step.showIcon ||
              (s.Template != null &&
                (s.Template.Remark != '' ||
                  (s.Template.Files != null && s.Template.Files.length > 0)))
          }
        }
      }
    },
    subFlowClick(step) {
      var affId = this.affair.Id
      var stepId = step.Id
      var itemId = step.ItemId
      approverStartSubflow(affId, stepId, itemId).then((res) => {
        const flow = res.data.Flow
        const url = res.data.Url
        const item = res.data.Item
        this.$router.push({
          path: url.Detail,
          query: {
            Id: step.Step.SubAffairId
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.steps-con {
  .step_item {
    .step {
      display: flex;
      align-items: center;
      justify-content: space-between;
      //padding: @margin-yC 0;
      position: relative;
      z-index: 2;
      .bg-line {
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 1px;
        //background: @mainColor;
        //left: @icon-size-1 /2 ;
      }
      .bg-line.first {
        //top: @margin-yC;
      }
      .bg-line.last {
        //bottom: @margin-yC;
      }
      .bg-line.first.last {
        height: 0;
      }
      .img {
        position: relative;
        z-index: 2;
      }
      .content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        //padding-right: @borderRadiusSmall;
        overflow: hidden;
        .body {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 0;
          .time {
            //color:@fontColor2;
          }
          .state {
            //padding-top:@sectionMarginD;
            //color:@color-main;
          }
        }
      }
      .more {
        position: absolute;
        right: -7px;
        i {
          height: 15px;
          width: 10px;
          //color:@fontColor2;
        }
      }
    }
  }
}
.shunt_con ::v-deep .nut-tab {
  padding: 0;
}
.staff {
  //padding-bottom: @margin-yC;
}
.staff:last-child {
  padding-bottom: 0;
}
.steps-con {
}
</style>
